// 页面独立样式

// banner
#banner {
    background-color: #111111;
    margin-top: 10vw;
    text-align: center;

    .title h3 {
        color: #fcac45;

        font-size: 30px;
        // 字体大写
        text-transform: uppercase;

        span {
            color: #999999;
        }
    }

    .content {
        p {
            color: #999999;
            font-size: 15px;
            // margin-top: 5px;

            span {
                color: #ffffff;
                // 轻字体
                font-family: OSlight;
            }
        }
    }

    .xiab {
        margin-top: 15vw;
        margin-bottom: 8vw;
    }
}

// about
#about {
    background-color: #fff;
    padding-top: 80px;
    width: 100%;
    display: flex;

    .right {
        // background-color: #f9ce57;
        width: 50%;
        display: flex;
        // margin-left: 20px;

        img {
            // background-color: #fd4848;
            // width: 90%;
            // height: 90%;
            margin-left: 10%;
        }
    }

    .lfet {
        // background-color: #71ffb5;
        width: 50%;

        .one {
            // 字体大写
            text-transform: uppercase;

            .biaotia {

                p {
                    color: #222222;
                    font-size: 20px;
                    // 轻字体
                    font-family: OSlight;
                }
            }

            .biaotib {

                h3 {
                    color: #222222;
                    font-size: 25px;

                    span {
                        // 轻字体
                        font-family: OSlight;
                    }

                }
            }
        }

        .hengx {
            background-color: #fcac45;
            width: 75px;
            height: 3px;
            border-radius: 5px;
            margin-bottom: 20px;
        }
    }

    .two {

        p {
            color: #6c6c6c;
            font-size: 10px;
            width: 50%;
        }
    }

    .three {
        margin-top: 40px;

        .bta {
            display: flex;
            // 上下居中
            align-items: center;

            img {
                width: 15px;
                height: 15px;
            }

            p {
                margin-left: 10px;
                color: #6c6c6c;
                font-size: 10px;

                span {
                    color: #5a5a5a;
                    font-weight: bold;
                }
            }
        }
    }

    .four {
        width: 190px;
        height: 40px;
        border: 1px solid black;
        border-radius: 2px;
        display: flex;
        // 上下居中
        align-items: center;
        // 左右居中
        justify-content: center;
        margin-top: 40px;

        img {
            margin-top: -2px;
            width: 10px;
            height: 10px;
        }

        p {
            margin-left: 5px;
            font-size: 10px;
            color: #6c6c6c;
        }
    }

}

// team
#team {
    background-color: #070707;
    padding-bottom: 3vw;

    .toubu {


        h3 {
            color: #ffffff;
            font-size: 44px;
            // 字体大写
            text-transform: uppercase;
            text-align: center;
            padding-top: 5vw;
            font-family: OSLight;

            span {

                font-family: OSBold;
            }
        }

        .hxa {
            background-color: #fcac45;
            width: 100px;
            height: 3px;
            border-radius: 2px;
            margin: 0 auto;
            // display: flex;
        }

        .hxb {
            background-color: #b37b33;
            width: 66px;
            height: 3px;
            border-radius: 3px;
            margin: 10px auto 0;
            // margin-top: 10px;
        }

        .team-swiper {
            background-color: #070707;
            margin-top: 8vw;
            padding-bottom: 4vw;

            .list {
                display: flex;
                // 两边对齐
                justify-content: space-between;

                .item {
                    width: 22%;
                    text-align: center;

                    .touxiang {
                        width: 127px;
                        height: 127px;
                        margin: auto;
                        border-radius: 50%;
                        overflow: hidden;

                        img {
                            width: 100%;
                            height: 100%;
                            // 裁切模式
                            object-fit: cover;

                        }
                    }

                    .user-info {
                        color: #ffffff;
                        // font-size: 15px;
                        margin-top: 15px;

                        // 最后一个p
                        p:last-child {
                            font-size: 12px;
                            // 轻字体
                            font-family: OSLight;
                        }
                    }

                    .content {
                        color: #ffffff;
                        margin-top: 35px;

                    }
                }
            }

            .swiper-pagination-bullet {
                border-radius: unset;
                background-color: #fff;
                opacity: 1;
            }

            .swiper-pagination-bullet-active {
                background-color: #fcac45;
            }
        }
    }


}

// portfolio
#portfolio {
    width: 100vw;
    background-color: #ffffff;

    .toubua {

        h3 {
            // color: #ffffff;
            font-size: 44px;
            // 字体大写
            text-transform: uppercase;
            text-align: center;
            padding-top: 5vw;
            font-family: OSLight;

            span {

                font-family: OSBold;
            }
        }

        .hxc {
            background-color: #fcac45;
            width: 100px;
            height: 3px;
            border-radius: 2px;
            margin: 0 auto;
            // display: flex;
        }

        .hxd {
            background-color: #b37b33;
            width: 66px;
            height: 3px;
            border-radius: 3px;
            margin: 10px auto 0;
            // margin-top: 10px;
        }


    }

    .neir {
        display: flex;
        justify-content: space-evenly;
        margin-top: 15vw;
        padding-bottom: 5vw;

        .item {

            .tup {
                width: 120px;
                height: 120px;
                border: 5px solid #fcac45;
                border-radius: 50%;
                overflow: hidden;
                margin-left: 40px;
                display: flex;
                justify-content: center;
                align-items: center;

                img {
                    width: 50px;
                    height: 50px;
                }
            }

            .biaotic {
                margin-top: 20px;
                text-align: center;

                h3 {
                    font-size: 20px;
                    // 字体大写
                    text-transform: uppercase;
                    // 粗体
                    font-family: OSBold;
                    // text-align: center;
                }

                p {
                    // margin-top: 20px;
                    width: 20em;
                    font-size: 10px;
                    text-align: center;
                }
            }
        }
    }
}

// testimonials
#testimonials {

    width: 100vw;
    background-color: #070707;

    .toubub {

        h3 {
            color: #ffffff;
            font-size: 44px;
            // 字体大写
            text-transform: uppercase;
            text-align: center;
            padding-top: 5vw;
            font-family: OSLight;

            span {

                font-family: OSBold;
            }
        }

        .hxe {
            background-color: #fcac45;
            width: 100px;
            height: 3px;
            border-radius: 2px;
            margin: 0 auto;
            // display: flex;
        }

        .hxf {
            background-color: #b37b33;
            width: 66px;
            height: 3px;
            border-radius: 3px;
            margin: 10px auto 0;
            // margin-top: 10px;
        }
    }

    .team-swiper {
        background-color: #070707;
        margin-top: 8vw;
        padding-bottom: 10vw;

        .list {
            text-align: center;

            h3 {
                color: #fff;
                font-size: 30px;
                // 字体大写
                text-transform: uppercase;
            }


        }

        // 分页点样式
        .swiper-pagination-bullet {
            // 去边框
            border-radius: unset;
            background-color: #fff;
            // 透明度
            opacity: 1;
            margin-bottom: 5vw;
        }

        .swiper-pagination-bullet-active {
            background-color: #fcac45;
        }
    }
}

// contact
#contact {
    width: 100vw;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;

    .biaotid {

        h3 {
            // color: #ffffff;
            font-size: 44px;
            // 字体大写
            text-transform: uppercase;
            text-align: center;
            padding-top: 5vw;
            font-family: OSLight;

            span {

                font-family: OSBold;
            }
        }

        .hxg {
            background-color: #fcac45;
            width: 100px;
            height: 3px;
            border-radius: 2px;
            margin: 0 auto;
            // display: flex;
        }

        .hxh {
            background-color: #b37b33;
            width: 66px;
            height: 3px;
            border-radius: 3px;
            margin: 10px auto 0;
            // margin-top: 10px;
        }
    }

    .content {
        margin-top: 5vw;
        padding-bottom: 5vw;
        text-align: center;

        p {
            color: #6c6c6c;
            font-size: 10px;
            width: 85em;
        }
    }
}

// filter
.filter {
    width: 100vw;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;

    .toubuc {
        width: 100vw;
        height: 25px;
        display: flex;
        justify-content: space-around;

        .hs {
            width: 25%;
            // background-color:blue;


            h3 {
                // 字体大写
                text-transform: uppercase;
                //  粗体
                font-family: OSBold;
                font-size: 15px;
            }
        }

        .hp {
            // background-color:blue;
            width: 25%;
            display: flex;
            justify-content: flex-end;

            .item {
                // width: 20%;
                height: 20px;
                border-right: 3px solid #ccc;
                margin-left: 5px;
                text-align: center;

                p {
                    // height: 5em;
                    font-size: 10px;
                    margin-right: 2px;
                }
            }
        }
    }

    .content {
        width: 80%;
        display: flex;
        flex-wrap: wrap;

        .item {
            // background-color: red;
            width: 230px;
            height: 230px;
            margin: 20px;
            display: flex;
            align-items: center;
            justify-content: center;

            img {
                width: 100%;
                height: 100%;
            }
        }

    }

}

// clients
.clients {

    width: 100vw;
    background-color: #070707;

    .toubue {

        h3 {
            color: #ffffff;
            font-size: 44px;
            // 字体大写
            text-transform: uppercase;
            text-align: center;
            padding-top: 5vw;
            font-family: OSLight;

            span {

                font-family: OSBold;
            }
        }

        .hxi {
            background-color: #fcac45;
            width: 100px;
            height: 3px;
            border-radius: 2px;
            margin: 0 auto;
            // display: flex;
        }

        .hxj {
            background-color: #b37b33;
            width: 66px;
            height: 3px;
            border-radius: 3px;
            margin: 10px auto 0;
            // margin-top: 10px;
        }
    }

    .team-swiper {
        background-color: #070707;
        margin-top: 8vw;
        padding-bottom: 10vw;
        display: flex;

        .list {

            margin: auto;

            .a {
                width: 80%;
                color: #fff;
                font-size: 15px;
                // 字体大写
                text-transform: uppercase;
                text-align: center;
                margin: auto;
                margin-bottom: 20px;
            }

            .p {

                color: #ccc;
                font-size: 10px;
                text-align: center;
                margin: auto;
            }


        }

        // 分页点样式
        .swiper-pagination-bullet {
            // 去边框
            border-radius: unset;
            background-color: #fff;
            // 透明度
            opacity: 1;
            margin-bottom: 5vw;
            // margin-bottom: 10px;
        }

        .swiper-pagination-bullet-active {
            background-color: #fcac45;
        }
    }
}

// us
.us {
    width: 100vw;
    background-color: #ffffff;
    // display: flex;
    // flex-direction: column;
    // align-items: center;

    .toubuk {

        h3 {
            // color: #ffffff;
            font-size: 44px;
            // 字体大写
            text-transform: uppercase;
            text-align: center;
            padding-top: 5vw;
            font-family: OSLight;

            span {

                font-family: OSBold;
            }
        }

        .hxl {
            background-color: #fcac45;
            width: 100px;
            height: 3px;
            border-radius: 2px;
            margin: 0 auto;
            // display: flex;
        }

        .hxm {
            background-color: #b37b33;
            width: 66px;
            height: 3px;
            border-radius: 3px;
            margin: 10px auto 0;
            // margin-top: 10px;
        }
    }

    .nrong {
        // margin: auto;
        margin-top: 5vw;
        text-align: center;
        padding-bottom: 8vw;

        p {
            width: 58em;
            color: #808080;
            font-size: 10px;
            margin: auto;
        }
    }

    .dibu {
        display: flex;
        align-items: center;
        flex-direction: column;

        .one {
            width: 700px;
            display: flex;
            justify-content: space-evenly;
            padding-bottom: 2vw;

            .onea {
                // width: 50%;
                // display: flex;

                p {
                    color: #808080;
                    font-size: 10px;

                    span {
                        color: red;
                    }
                }

                input {
                    width: 300px;
                }


            }
        }

        .two {
            padding-bottom: 2vw;

            p {
                color: #808080;
                font-size: 10px;

                span {
                    color: red;
                }
            }

            input {
                width: 650px;
                height: 165px;
            }

        }

        .three {
            width: 650px;
            display: flex;
            justify-content: flex-end;
            padding-bottom: 8vw;

            .ann {
                background-color: #fcac45;
                width: 164px;
                height: 35px;
                display: flex;
                align-items: center;
                justify-content: center;

                h3 {
                    font-family: OSBold;
                    color: #fff;
                    font-size: 15px;
                    // font-family: OSLight;
                    text-transform: uppercase;
                }
            }
        }
    }
}